import React from 'react';

import styled from 'styled-components'

import { Icon } from 'antd';

export enum Card {
  yellow = 2,
  red
}


export const CardIcon = styled.span`
  display: block;
  width: 24px;
  height: 34px;
  border-radius: 4px;
  transform: rotate(15deg);
  ${props => {
    switch (props.type) {
      case Card.yellow.toString():
        return `background: var(--yellow)`
      case Card.red.toString():
        return `background: var(--red)`
      default:
        return `background: var(--grey)`
    }
  }};
`

export const CardStopIcon = styled(Icon)`
  font-size: 34px;
  color: var(--stop-grey);
  transform: rotate(180deg);
  display: inherit;
`

export const Cards = ({ type }) => {

  return <CardIcon type={type} />
}